<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="" />
    <style>
      div.mermaid {
        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
  </head>

  <body>
    <h1>Radar diagram demo</h1>

    <div class="diagrams">
      <pre class="mermaid">
      radar-beta 
        title My favorite ninjas
        axis Agility, Speed, Strength
        axis Stam["Stamina"] , Intel["Intelligence"]
      
        curve Ninja1["Naruto"]{
            Agility 2, Speed 2,
            Strength 3, Stam 5,
            Intel 0
        }
        curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
        curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
      
        showLegend true
        ticks 3
        max 8
        min 0
        graticule circle
    </pre
      >

      <pre class="mermaid">
      ---
      config:
        radar:
          axisScaleFactor: 0.25
          axisLabelFactor: 0.95
      ---
      radar-beta 
        title DevOps Radar
        axis f["Feature Velocity"], s["Stability"]
        axis r["Resilience"], e["Efficiency"]
        axis c["Cost"], d["DevSecOps"]
      
        curve app1["App1"]{
          f 5, s 4.5, r 3.8, d 4.2, e 4.5, c 3.5
        }
        curve app2["App2"]{4, 3, 4, 3, 3, 4}, app3["App3"]{3, 2, 4, 3, 2, 3}
        curve app4["App4"]{2, 1, 3.2, 2.5, 1, 2}
      
        showLegend true
        ticks 3
        max 5
        graticule polygon
    </pre
      >

      <pre class="mermaid">
      %%{init: {'theme': 'forest'} }%%
      radar-beta 
        title Forest theme
        axis Agility, Speed, Strength
        axis Stam["Stamina"] , Intel["Intelligence"]
      
        curve Ninja1["Naruto"]{
            Agility 2, Speed 2,
            Strength 3, Stam 5,
            Intel 0
        }
        curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
        curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
    </pre
      >

      <pre class="mermaid" style="background-color: black">
      %%{init: {'theme': 'dark'} }%%
      radar-beta 
        title Dark theme
        axis Agility, Speed, Strength
        axis Stam["Stamina"] , Intel["Intelligence"]
      
        curve Ninja1["Naruto"]{
            Agility 2, Speed 2,
            Strength 3, Stam 5,
            Intel 0
        }
        curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
        curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
    </pre
      >
      <pre class="mermaid">
      %%{init: {'theme': 'base', 'themeVariables': {'cScale0': '#ff0000', 'cScale1': '#00ff00', 'cScale2': '#0000ff'}} }%%
      radar-beta 
        title Custom colors
        axis Agility, Speed, Strength
        axis Stam["Stamina"] , Intel["Intelligence"]

        curve Ninja1["Naruto"]{
            Agility 2, Speed 2,
            Strength 3, Stam 5,
            Intel 0
        }
        curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
        curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
    </pre
      >
      <pre class="mermaid">
      ---
      config:
        radar:
          axisScaleFactor: 0.25
          curveTension: 0.1
        theme: base
        themeVariables:
          cScale0: "#FF0000"
          cScale1: "#00FF00"
          cScale2: "#0000FF"
          radar:
            curveOpacity: 0
      ---
      radar-beta
        title Custom colors, axisScaleFactor, curveTension, opacity
        axis A, B, C, D, E
        curve c1{1,2,3,4,5}
        curve c2{5,4,3,2,1}
        curve c3{3,3,3,3,3}
      </pre>
    </div>
    <script type="module">
      import mermaid from '/mermaid.esm.mjs';
      mermaid.initialize({
        logLevel: 3,
        securityLevel: 'loose',
      });
    </script>

    <style>
      .diagrams {
        display: flex;
        flex-wrap: wrap;
      }
      pre {
        width: 45vw;
        padding: 2em;
      }
    </style>
  </body>
</html>
